@import "selectors";

// Use push mixins with pointerEvents="scrollbar"

@mixin pushLeft {
  left: var(--scrollbar-total-size);
  right: 0;
}

@mixin pushRight {
  left: 0;
  right: var(--scrollbar-total-size);
}

@mixin pushTop {
  top: var(--scrollbar-total-size);
  bottom: 0;
}

@mixin pushBottom {
  top: 0;
  bottom: var(--scrollbar-total-size);
}

// Use push mixins with pointerEvents="viewport"

@mixin pushPaddingLeft {
  padding-left: var(--scrollbar-total-size);
}

@mixin pushPaddingRight {
  padding-right: var(--scrollbar-total-size);
}

@mixin pushPaddingTop {
  padding-top: var(--scrollbar-total-size);
}

@mixin pushPaddingBottom {
  padding-bottom: var(--scrollbar-total-size);
}

@mixin nativeAppearance {
  &[appearance="standard"] {
    @include scrollbarYUsed {
      @include ltr {
        @include scrollbarPointerEvents {
          @include viewportWrapper {
            @include pushRight;
          }
        }
        @include viewportPointerEvents {
          @include viewport {
            @include pushPaddingRight;

            @include content {
              @include pushPaddingRight;
            }
          }
        }
      }
      @include rtl {

        @include scrollbarPointerEvents {
          @include viewportWrapper {
            @include pushLeft;
          }
        }
        @include viewportPointerEvents {
          @include viewport {
            @include pushPaddingLeft;

            @include content {
              @include pushPaddingLeft;
            }
          }
        }
      }
      @include scrollbarYInverted {
        @include ltr {

          @include scrollbarPointerEvents {
            @include viewportWrapper {
              @include pushLeft;
            }
          }
          @include viewportPointerEvents {
            @include viewport {
              @include pushPaddingLeft;

              @include content {
                @include pushPaddingLeft;
              }
            }
          }
        }
        @include rtl {

          @include scrollbarPointerEvents {
            @include viewportWrapper {
              @include pushRight;
            }
          }
          @include viewportPointerEvents {
            @include viewport {
              @include pushPaddingRight;

              @include content {
                @include pushPaddingRight;
              }
            }
          }
        }
      }
    }
    @include scrollbarXUsed {

      @include scrollbarPointerEvents {
        @include viewportWrapper {
          @include pushBottom;
        }
      }

      @include viewportPointerEvents {
        @include viewport {
          @include pushPaddingBottom;

          @include content {
            @include pushPaddingBottom;
          }
        }
      }

      @include scrollbarXInverted {

        @include scrollbarPointerEvents {
          @include viewportWrapper {
            @include pushTop;
          }
        }

        @include viewportPointerEvents {
          @include viewport {
            @include pushPaddingTop;

            @include content {
              @include pushPaddingTop;
            }
          }
        }
      }
    }
  }
}
